/**
 * 图表结构说明：
 * Card
 *  --Tabs
 *   --Echart
 */
import React from 'react';
import { Card, Spin } from 'antd';
import ReactEcharts from 'echarts-for-react';

export default class CommonEchartComp2 extends React.Component {
  render() {
    const { cardParams = {}, tabParams = {}, echartParams = {}, load = {} } = this.props;
    const { cardTitle = '', cardExtra = null, bodyStyle = { height: 350 } } = cardParams;
    const { tabData = [], tabActiveKey = '', tabOnChange = () => { } } = tabParams;
    const { option = {}, containerStyle = { width: 300, height: 300 } } = echartParams;
    const { loading = false, loadmsg = '加载中...' } = load;
    return (
      <Spin spinning={loading} tip={loadmsg}>
        <Card
          title={cardTitle}
          tabList={tabData}
          activeTabKey={tabActiveKey}
          extra={cardExtra}
          onTabChange={key => tabOnChange(key)}
          bodyStyle={bodyStyle}
        >
          <div style={containerStyle}>
            <ReactEcharts
              option={option}
            />
          </div>
        </Card>
      </Spin>
    );
  }
}